<h3>Dropdown positioning tests</h3>

<form id="default">
	@if (isInDom) {
		<div class="mb-3 d-inline-block me-3">
			<div
				id="dropdown"
				ngbDropdown
				class="d-inline-block me-1 mb-1"
				[autoClose]="false"
				[container]="container"
				[placement]="placement"
			>
				<button class="btn btn-outline-secondary" ngbDropdownToggle>Toggle dropdown</button>
				<div ngbDropdownMenu id="dropdownMenu">
					<button ngbDropdownItem>Item</button>
				</div>
			</div>
			<br />
			<div
				id="dropdownWithTemplate"
				ngbDropdown
				class="d-inline-block"
				[autoClose]="false"
				[container]="container"
				[placement]="placement"
			>
				<button class="btn btn-outline-secondary" ngbDropdownToggle>Dropdown with template</button>
				<div ngbDropdownMenu id="dropdownWithTemplateMenu">
					<button ngbDropdownItem>Action - 1</button>
					<button ngbDropdownItem>Another Action</button>
					<button ngbDropdownItem>Something else is here</button>
				</div>
			</div>
		</div>
	}

	<div class="d-inline-block ms-3">
		<div class="mb-1">
			<button class="btn btn-outline-secondary me-1" id="isInDom-true" (click)="isInDom = true">Add in dom</button>
			<button class="btn btn-outline-secondary me-1" id="isInDom-false" (click)="isInDom = false">
				Remove from dom
			</button>
			<button class="btn btn-outline-secondary me-1 ms-2" id="container-body" (click)="toggleContainer('body')">
				Append to body
			</button>
			<button class="btn btn-outline-secondary" id="container-null" (click)="toggleContainer(null)">
				Append to widget
			</button>
		</div>
		<div>
			<button
				class="btn btn-outline-secondary me-1 ms-2"
				id="placement-top-start"
				(click)="togglePlacement('top-start')"
			>
				On top-start
			</button>
			<button
				class="btn btn-outline-secondary me-1"
				id="placement-bottom-start"
				(click)="togglePlacement('bottom-start')"
			>
				On bottom-start
			</button>
			<button class="btn btn-outline-secondary me-1 ms-2" id="placement-top-end" (click)="togglePlacement('top-end')">
				On top-end
			</button>
			<button class="btn btn-outline-secondary me-1" id="placement-bottom-end" (click)="togglePlacement('bottom-end')">
				On bottom-end
			</button>
		</div>
	</div>
</form>
